/* ======================================================
    <!-- Flexslider -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/_variable-and-mixin.scss';


/*
 * 1. Thumbnail ControlNav Pattern
 * 2. Default Slideshow & Default  Controls
 *    2.1. Prevent content overflow
 *    2.2. Left and right arrows by default
 *    2.3. Pagination Dot by default
 *    2.4. Thumbnail

 * 3. Custom Controls
 *    3.1. Left and right arrows by Custom Controls
 *    3.2. Pagination by Custom Controls
 *    3.3. Custom Next/Prev and Pagination Styles
 *    3.4. Next/Prev Image Thumbnail In Navigation
 *    3.5. Timeline Indicator

 * 4. Primary Slideshow  (with dynamic min/max ranges )
 * 5. Primary Slideshow
 * 6. Parallax Slideshow
*/



/*
 ---------------------------
 1. Thumbnail ControlNav Pattern
 ---------------------------
 */
.uix-flexslider__thumbs {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	width: 100%;
	overflow: hidden;
	overflow-x: auto;
	white-space: nowrap;
	margin-top: 1.5rem;


	&::-webkit-scrollbar-track {
		border-radius: 0px;
		background-color: #E6E3E3;
	}

	&::-webkit-scrollbar {
		height: 5px;
		background-color: $highlight-color1;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 0px;
		background-color: $highlight-color1;
	}

	ul {

		margin: 0;
		padding: 0;


		li {
			width: 100px;
			max-height: 100px;
			display: inline-block;
			cursor: pointer;
			margin-right: 10px;
			margin-bottom: 10px;
			padding: 0;
			transform: scale(.9);

			&.is-active {
				transform: scale(1);
			}


			img {

				box-shadow: 0px 6px 11px 1px rgba(0,0,0,0.15);
			}

		}
	}


}



/*
 ---------------------------
 2. Default Slideshow & Default  Controls
 ---------------------------
 */
/*---- 2.1. Prevent content overflow ----*/
.uix-flexslider,
.uix-flexslider .uix-flexslider__inner,
.uix-flexslider .uix-flexslider__inner > .uix-flexslider__item {
    max-height: 100vh;

}


.uix-flexslider,
.uix-flexslider__viewport {
	transition: .1s ease;
}

.uix-flexslider {
	margin: 0;
	padding: 0;
	position: relative;
	zoom: 1;
	width: 100%;
	overflow: hidden;
	z-index: 0;
}

.uix-flexslider__viewport {
    max-height: 200vh;
}

.uix-flexslider .uix-flexslider__inner {

	height: 100%; /* Required */

	> .uix-flexslider__item {
		display: none;
		-webkit-backface-visibility: hidden;
		position: relative;

	}
	img {
		max-width: 100%;
		display: block;
		border: none;
		box-shadow: none;
		margin: 0;
		padding: 0;
	}
}

html[xmlns] .uix-flexslider .uix-flexslider__inner {
    display: block;
}

* html .uix-flexslider .uix-flexslider__inner {
    height: 1%;
}

.no-js .uix-flexslider .uix-flexslider__inner > .uix-flexslider__item:first-child {
    display: block;
}

.uix-flexslider .uix-flexslider__inner {
	zoom: 1;

	img {
		height: auto;
		width: 100%;
	}
}


/*---- 2.2. Left and right arrows by default ----*/
ul.uix-flexslider__direction-nav {

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;

	li {
		margin: 0;
		padding: 0;
		list-style: none;
		position: relative;

		a {
			display: block;
			z-index: 9;
			position: absolute;
			top: 50%;
			height: 40px;
			margin-top: -20px;
			line-height: 40px;
			width: 50px;
			text-align: center;
			opacity: 0.8;
			color: #fff;
			font-size: 1.3125rem;
			opacity: 0.66;

			&:hover {
				opacity: 1;
				color: #fff;
				text-decoration: none;
			}

			&.uix-flexslider__prev {
				left: -100px;

				&.uix-flexslider__disabled {
					visibility: hidden;
				}

			}
			&.uix-flexslider__next {
				right: -100px;
				text-align: right;

				&.uix-flexslider__disabled {
					visibility: hidden;
				}

			}


		}
	}


}

.uix-flexslider:hover {

	a {
		&.uix-flexslider__prev {
			left: 0;
		}
		&.uix-flexslider__next {
			right: 20px;
		}
	}

}

/*----- 2.3. Pagination Dot by default -----*/
ol.uix-flexslider__control-paging {
	list-style: none;
	left: 0;
	bottom: 0;
	font-size: 0;/*Fighting the Space Between Inline Block Elements*/
	display: block;
	width: 100%;
	text-align: center; /*require*/
	position: absolute;

	li {
		font-size: 1rem;/*Fighting the Space Between Inline Block Elements*/
		display: inline-block; /*require*/
		margin: 0 .2rem;

		a {
			width: 12px;
			height: 12px;
			display: block;
			background: rgba(255, 255, 255, 0.5);
			cursor: pointer;
			text-indent: -9999px;
			border-radius: 20px;
			box-shadow: 0px 6px 23px -2px rgba(0, 0, 0, 0.36);

			&:hover,
			&.uix-flexslider__active {
				background: rgba(255, 255, 255, 1);
				width: 25px;
			}
		}

	}

}

/*----- 2.4. Thumbnail -----*/
.uix-flexslider__control-thumbs {
	margin: 5px 0 0;
	position: static;
	overflow: hidden;

	li {
		width: 25%;
		float: left;
		margin: 0;
	}
	img {
		width: 100%;
		height: auto;
		display: block;
		opacity: .7;
		cursor: pointer;
		transition: .1s ease;

		&:hover {
			opacity: 1;
		}
	}
	.uix-flexslider__active {
		opacity: 1;
		cursor: default;
	}
}



/*
 ---------------------------
 3. Custom Controls
 ---------------------------
 */
.uix-flexslider__mycontrols {
	display: table;
	width: 100%;
	table-layout: fixed;
	margin-top: 1.75rem;


	/*----- 3.1. Left and right arrows by Custom Controls -----*/
	> a {
		position: relative;
		display: table-cell;
		color: rgba(233, 47, 22, 1);
		opacity: .7;
		width: 30px;
		line-height: 30px;
		text-align: center;

		&::after {
			content: '';
			width: 30px;
			height: 30px;
			border: 1px solid rgba(233, 47, 22, 1);
			position: absolute;
			display: block;
			top: 0;
			border-radius: 50%;
		}


		&:hover {
			opacity: 1;
		}

		&.uix-flexslider__mycontrols__prev {

			&::after {
				left: 0;
			}


			&.uix-flexslider__disabled {
				visibility: hidden;

			}
		}
		&.uix-flexslider__mycontrols__next {

			&::after {
				right: 0;
			}

			&.uix-flexslider__disabled {
				visibility: hidden;
			}

		}


	}


	/*----- 3.2. Pagination by Custom Controls  -----*/
	.uix-flexslider__mycontrols__control-paging {

		> ol {

			position: relative;
			transform: translateY(.5rem);

			li {

				margin: 0 .5rem;


				a {
					background: rgba(233, 47, 22, 0.5);
					position: relative;

					&::after {
						content: '';
						display: block;
						width: 20px;
						height: 20px;
						border: 1px solid rgba(233, 47, 22, 1);
						border-radius: 100%;
						position: absolute;
						top: -4px;
						left: -4px;
						transform: scale(0);
						@include transition-default();
					}


					&:hover,
					&.uix-flexslider__active {
						background: rgba(233, 47, 22, 1);
						width: 12px;

						&::after {
							transform: scale(1);
						}

					}
				}

			}

		}


	}

}


/*---- 3.3. Custom Next/Prev and Pagination Styles ----*/
.uix-flexslider__mycontrols.uix-flexslider__mycontrols--style-1 {


}



/*----- 3.4. Next/Prev Image Thumbnail In Navigation -----*/
.uix-flexslider__mycontrols--thumb {
	display: table;
	width: 100%;
	table-layout: fixed;
	margin-top: 1.75rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: calc(100% - 30px);


	a > span {
		@include transition-default();
		width: 100px;
		height: 100px;
		border-radius: 50%;
		display: inline-block;
		overflow: hidden;
		transform: scale(.7);
		opacity: .5;
		@include outer-shadow( 'regular' );

		img {
			width: 100%;
			height: 100%;
		}
	}


	> {
		* {
			display: table-cell;
		}
		a {
			width: 50px;

			&:hover {
				> span {
					transform: scale(1);
					opacity: 1;
				}
			}

		}
	}

	.uix-flexslider__mycontrols--thumb__prev {
		&.is-disabled {
			display: none;
		}

	}
	.uix-flexslider__mycontrols--thumb__next {

		text-align: right;

		&.is-disabled {
			display: none;
		}



	}

}



/*----- 3.5. Timeline Indicator -----*/
.uix-flexslider__timeline-nav {

	height: 3px;
	position: relative;
	width: 100%;
	background: rgba(0,0,0,.1);
	margin: 1rem 0;

	> span {
		display: block;
		width: 0;
		height: 100%;
		background: $highlight-color1;
		@include transition-default();
	}

}




/*
 ---------------------------
 4. Primary Slideshow  (with dynamic min/max ranges )
 ---------------------------
 */
.uix-flexslider.uix-flexslider--itemgrid {

	.uix-flexslider__item {
		transition: .1s ease;
		opacity: 0.2;

		&.uix-flexslider__item--active-prev {

		}

		&.uix-flexslider__item--active-next {

		}

		&.uix-flexslider__item--active {
			opacity: 1;
		}
	}


}

@media all and (max-width: 768px) {
	.uix-flexslider.uix-flexslider--itemgrid {

		.uix-flexslider__item {
			opacity: 1;
		}


	}

}



/*
 ---------------------------
 5. Primary Slideshow
 ---------------------------
 */
.uix-flexslider.uix-flexslider--primary {
	overflow: hidden;


	/* Full Screen Slider
	 * You need add an attribute "data-slider-bg" to ".uix-flexslider__item"
	*/
	&.is-fullscreen {
		min-height: 100vh;

		img {
			height: 100vh;
			visibility: hidden;
		}
	}

	.uix-flexslider__inner {

		> .uix-flexslider__item {

			@include background-cover();
			position: relative;

			.uix-flexslider__desc {
				position: absolute;
				top: 0;
				left: 0;
				color: white;
				width: 100%;
				/* Vertical Center */
				top: 50%;
				transform: translateY(-50%);

				.uix-flexslider__el-level {
					animation-delay: .5s;
					animation-duration: .6s;
					animation-fill-mode: both;
					animation-name: uix-cssAnim--fadeOutLeft;
				}
				.uix-flexslider__el-level-1,
				.uix-flexslider__el-level-2 {
					color: #fff;
				}
			}

			&.uix-flexslider__active-slide {

				.uix-flexslider__desc {

					.uix-flexslider__el-level {
						animation-delay: .4s;
						animation-duration: .6s;
						animation-fill-mode: both;
						animation-name: uix-cssAnim--fadeInLeft;
					}

					.uix-flexslider__el-level-1 {
						animation-delay: .4s;
					}
					.uix-flexslider__el-level-2 {
						animation-delay: .5s;
					}
					.uix-flexslider__el-level-3 {
						animation-delay: .6s;
					}

				}
			}
		}
	}
}


@media all and (max-width: 768px) {

	.uix-flexslider.uix-flexslider--primary {

		&.is-fullscreen {
			min-height: inherit;

			img {
				height: auto;
			}
		}


		.uix-flexslider__inner > .uix-flexslider__item {
			.uix-flexslider__desc {

				h2,
				h3 {
					font-size: 1rem;
				}

				p {
					font-size: 0.875rem;
				}

				h2,
				h3,
				p {
					margin-bottom: 0;
					padding-bottom: 0;
					line-height: 1.2;
				}

				.uix-btn {
					margin-top: .3rem;
					padding: .3rem 1rem;
					font-size: 0.75rem;
				}

			}
		}


	}
}



@keyframes uix-cssAnim--fadeInLeft {
	0% {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}


@keyframes uix-cssAnim--fadeOutLeft {
	0% {
	    opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
}



/*
 ---------------------------
 6. Parallax Slideshow
 ---------------------------
 */
.uix-flexslider.uix-flexslider--parallax {
	max-height: 100vh;
	overflow: hidden;

	img {
	    max-height: 100vh;
	}

	.uix-flexslider__inner {

		> .uix-flexslider__item {

			@include background-cover();
			position: relative;

			img {
				max-height: calc( 100% - 2rem );
			}

			.uix-flexslider__el-level {
				position: absolute;
				transition: all 1.5s ease; /* Note: The duration can not be less than 1.5 */
				width: auto;
				box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.55);
				transform: translateY(-50%);
				top: 50%;
			}

			.uix-flexslider__el-level-1 {
				left: 55%;
				z-index: 3;
			}

			.uix-flexslider__el-level-2 {
				left: 30%;
				z-index: 2;
			}

			&.uix-flexslider__item--left {
				.uix-flexslider__el-level-1 {
					transform: translate(-300px,-50%);
				}
				.uix-flexslider__el-level-2 {
					transform: translate(-50px,-50%);
				}
			}

			&.uix-flexslider__item--right {
				.uix-flexslider__el-level-1 {
					transform: translate(300px,-50%);
				}
				.uix-flexslider__el-level-2 {
					transform: translate(50px,-50%);
				}
			}

		}

	}
}
